<?php

use yii\helpers\Url;
use yii\helpers\Html;
use website\helpers\Render;
use common\models\Recharge;
use common\models\EmploymentRecharge;

$this->addCrumbs('雇佣管理');
$this->title = '支付雇佣金';
?>
<style>
    #designer,
    #flyer-create,
    #flyer-recharge {padding:20px;background-color:#eee;}
    #designer {line-height:30px;}
    #designer img {float:left;width:120px;height:120px;margin-right:20px;}
    #order-title {height:30px;line-height:30px;margin-bottom:30px;font-size:18px;}
    .flyer-table table {border-top:none;}
    #alipay, #wechat {position:relative;padding:10px;border:1px solid #ccc;background-color:#eee;cursor:pointer;}
    #alipay.active, #wechat.active {background-color:#fff;}
    #alipay .selected, #wechat .selected {position:absolute;top:50%;right:10px;width:6px;height:6px;margin-top:-6px;border-radius:10px;border:3px solid #aaa;}
    #alipay.active, #wechat.active {background-color:#fff;}
    #alipay.active .selected, #wechat.active .selected {border-color:#f00;}
</style>

<div class="contenter">
    <?= $this->render('/user/navigator', ['active' => 'employment-list']) ?>
    
    <div id="user-contenter">
        <div class="box-shadow" id="sub-contenter">
            <div class="data-title"><span class="h3"><?= $this->title ?></span></div>
            <div class="data-content flyer-form">
                <div id="designer">
                    <img src="<?= Render::upload($employment->designer->photo) ?>">
                    <p>
                        <span class="fs-24px mr-20px"><?= $employment->designer->nickname ?></span>
                        <span class="mr-20px">综合评价：<i class="icon-star cl-red"></i><i class="icon-star cl-red"></i><i class="icon-star cl-red"></i><i class="icon-star cl-red"></i><i class="icon-star cl-red"></i></span>
                        <span class="mr-20px">薪资：<?= Render::amount($employment->designer->salary) ?>元/月</span>
                    </p>
                    <p>擅长类目：<span class="categories"><?= $employment->designer->categoriesString ?></span></p>
                    <p>擅长风格：<span class="styles"><?= $employment->designer->stylesString ?></span></p>
                    <p>擅长软件：<?= $employment->designer->skills ?></p>
                </div>
                <div class="mt-20px" id="flyer-create">
                    <div id="order-title"><i class="icon-th-list cl-red"></i> 订单信息</div>
                    <div class="form-item">
                        <div class="input-title">订单号：</div>
                        <div class="input-block"><input class="flyer-input" type="text" value="<?= $employment->order_number ?>" disabled></div>
                    </div>
                    <div class="form-item">
                        <div class="input-title">雇佣类型：</div>
                        <div class="input-block gender clear h-30px">
                            <input name="type" value="1" type="radio" flyer="radio" title="在线定制" disabled>
                            <input name="type" value="2" type="radio" flyer="radio" title="在线全职" disabled checked>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="input-title">雇佣周期：</div>
                        <div class="input-block"><input class="flyer-input" type="text" value="<?= date('Y-m-d', strtotime($employment->begin)) ?> ~ <?= date('Y-m-d', strtotime($employment->finish)) ?>" disabled></div>
                    </div>
                    <div class="form-item">
                        <div class="input-title">月薪：</div>
                        <div class="input-block"><input class="flyer-input" type="text" value="<?= Render::amount($employment->hires) ?> 元" disabled></div>
                    </div>
                    <div class="form-item">
                        <div class="input-title">工作内容：</div>
                        <div class="input-block"><textarea class="flyer-textarea" name="describe" disabled><?= Render::value($employment, 'describe') ?></textarea></div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">优惠劵：</div>
                        <div class="input-block"><?= Render::select('coupon_id', $employment->couponSelector, null, ['flyer' => 'select', 'prompt' => '可使用优惠劵']) ?></div>
                    </div>
                    <div class="form-item">
                        <div class="input-block tr">
                            <span class="mr-20px">订单总额：<span id="total_amount"><?= Render::amount($employment->total_amount) ?></span> 元</span>
                            <span class="mr-20px"> - </span>
                            <span class="mr-20px">优惠：<span id="deduct">0.00</span> 元</span>
                            <span class="mr-20px">应付金额：<span class="cl-red fs-16px" id="amount"><?= Render::amount($employment->total_amount) ?></span> 元</span>
                            <button class="flyer-button normal border-round" id="save-button" type="submit">立即支付</button>
                        </div>
                    </div>
                    <textarea id="flyer-create-json" data-form="#flyer-create" style="display:none;"><?= EmploymentRecharge::checker() ?></textarea>
                    <input type="hidden" name="_csrf" value="<?= Yii::$app->request->getCsrfToken() ?>">
                </div>
            </div>
            </div>
        </div>
    </div>
</div>
<div id="search" style="display:none;">
    <?= Render::select('style', \common\models\Design::$styleSelector, null) ?>
    <select id="category"></select>
</div>

<script src="<?= Render::static('art-template/template.js') ?>"></script>
<script src="<?= Render::static('flyer/flyer.class.js') ?>"></script>
<script src="<?= Render::static('flyer/tabler.class.js') ?>"></script>
<script src="<?= Render::static('flyer/checker.class.js') ?>"></script>
<script src="<?= Render::static('flyer/tableHandler.class.js') ?>"></script>
<script src="<?= Render::static('flyer/categorier.class.js') ?>"></script>
<script src="<?= Render::static('system/category-design.data.js') ?>"></script>
<script>
    var categorierClass = new categorier();
    $(document).ready(function() {
        categorierClass.init({ fix: false, dom: '#category', data: DesignCategories, relate: DesignCategoriesRelation, start: '<?= Yii::$app->params['designCategories'] ?>' });
        // 类型选择
        $('input[name=type][value=<?= Render::value($employment, 'type') ?>]').click();
        // 表单美化
        (new flyer).init({ form: '#flyer-create, #flyer-contact' });

        // 名称显示
        tableHandler.renderCategory({ category: $('#designer .styles'), select: '#search select[name=style]', color: false, splite: '，', default: '--' });
        tableHandler.renderCategory({ category: $('#designer .categories'), color: false, splite: '，', default: '--', functionName: function(id) {
            return categorierClass.renderTitles(id);
        }});
        
        $('select[name=coupon_id]').bind('change', function() {
            if($(this).val()) {
                // 充值按钮
                tableHandler.requestSingle({
                    isConfirm: false, isShadow: true, isAlert: false,
                    url: "<?= Url::to('@web/employer/employment-coupon-deduct?id='.$employment->id) ?>",
                    beforeRequest: function(param) {
                        param.data = { coupon_id: $('select[name=coupon_id]').val() };
                    },
                    requestSuccess: function (param) {
                        $('#deduct').text(fmoney(param.response.deduct, 2));
                        deductAmount();
                    }
                });
            }
            else {
                $('#deduct').text('0.00');
                deductAmount();
            }
        });
        
        // 充值按钮
        tableHandler.requestSingle({
            button: '#save-button', isConfirm: false, isShadow: false, isAlert: false,
            url: "<?= Url::to('@web/employer/employment-order?id='.$employment->id) ?>",
            beforeRequest: function(param) {
                param.data = { coupon_id: $('select[name=coupon_id]').val() };
                $('#save-button').attr('disabled', true);
            },
            requestFail: function(param) {
                $('#save-button').removeAttr('disabled');
            },
            requestSuccess: function (param) {
                $('#save-button').removeAttr('disabled');
                window.location.href = "<?= Url::to('@web/employer/employment-recharge?id='.$employment->id) ?>";
            }
        });
    });
    
    function deductAmount()
    {
        var totalAmount = parseFloat($('#total_amount').text().replace(',', ''));
        var deduct = parseFloat($('#deduct').text().replace(',', ''));
        $('#amount').text(fmoney(totalAmount - deduct, 2));
    }
</script>